<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">风险评估</block>
		</cu-custom>
		<!-- <view class="hui bold">
			对于大多数人来说，运动是安全的，而对于某些人来说，在明显增加体力活动前应先征求医生的意见。如果你计划参加健身运动，请先回答下表中的7个问题。如果你的年龄在15-69岁之间，PAR-Q会告诉你运动前是否需要咨询医生。如果你超过了69岁，且没有体力活动习惯，那么请咨询医生。回答问题最好依据你的一般感觉。请仔细阅读并诚实回答每一个问题：选择是或否。
		</view> -->
		
		
		<view class="wenti">
			{{item14.name}}
		</view>
		<radio-group @change="RadioChange14" style="width: 100%;height: 120upx;background: #fff;">
			<label class="margin-left" style="width: 100%;height: 60upx;display: block;">
				<radio class="blue radio" value="是"></radio>
				<text class="margin-left">是</text>
			</label>
			<label class="margin-left" style="width: 100%;height: 60upx;display: block;">
				<radio class="blue radio" value="否"></radio>
				<text class="margin-left">否</text>
			</label>
		</radio-group>
		<view class="cu-form-group" style="color: #777;">
			<input style="width: 350upx;padding-left: 20upx;" v-model="item14.value1" placeholder="如果是，请详细说明"></input>
		</view>
		
		<view class="wenti">
			{{item15.name}}
		</view>
		<checkbox-group @change="RadioChange15" data-num="15" style="height: 520upx;background: #fff;border-bottom: 1upx solid #ddd;padding: 0 20upx;">
		 <label class="margin-left" style="display: inline-block;" v-for="item in item15.radio_group" :key="item.value">
			<checkbox class="blue radio" :value="item.value"></checkbox>
			<text class="margin-left">{{item.value}}</text>
		 </label>
		</checkbox-group>
		
		<view class="bai">
			<view class="jgsm">
				<view class="jg">
					结果说明
				</view>
				<!-- <view class="rg">
					如果全部问题回答“否”：
				</view>
				<view class="par-q" style="padding-bottom: 20upx;">
					如果你对所有PAR-Q问题都回答了“否”，那么，你有理由相信你能：参加更多的体力活动，但要缓慢开始并循序渐进，这里最安全，最容易的方法。进行体适能评价，这是确定你的基础体适能的良好方法，并是你能够确定实现积极生活方式的最佳途径。强烈推荐你测量血压。如果你的血压高于144/94Hmmg，请在参加更多的体力活动前质询医生。
				</view> -->
				<view class="rg">
					医生建议：
				</view>
				<view class="par-q">
					如果你由于暂时的疾病，如感冒或发烧，感到身体不适，请等到疾病康复后再锻炼:
				</view>
				<view class="par-q">
					如果你怀孕了或可能怀孕了，在参加更多的体力活动前，请咨询医生。
				</view>
				<view class="par-q">
					[注意]如果你的健康状况改变了，，请告诉体适能或健康专家，询问是否需要调整体力活动计划。
				</view>
			</view>
		</view>
		<view class="qq bold">
			我已经阅读、理解并完成了这份问卷，对于我的所有问题一问都得到了令我满意的问题。
		</view>
		<view  style="margin-bottom: 200upx;background-color: #fff;position: relative;">
			<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)' @touchend='end'
			 @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
			</canvas>
			<cover-view style="position: absolute;right: 60upx;top: 20upx;z-index: 999999999;" @tap='clearClick'>
				重签
			</cover-view>
			
			<view style="
				position: absolute;top: 0upx;left: 25upx;color: #999;font-size: 55upx;z-index: 1;
				width: 700upx;
				height: 400upx;
				line-height: 400upx;text-align: center;
				background-color: #DDDDDD;
				">
				<text v-if="sign">客户签字</text>
			</view>
		</view>
		
		
		<button class="bg-gradual-green" :loading="loading" style="position: fixed;bottom: 0;left: 0;width: 100%;text-align: center;height: 100upx;line-height: 100upx;z-index: 99;" @click="submit()">
			提交
		</button>
	</view>
</template>

<script>
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
			success: function(res) {
					canvasw = res.windowWidth;
					canvash = res.windowHeight;
			},
	})
	export default {
		data() {
			return {
				sign: true, // 客户签字字样显示
				signImage: '',
				isEnd: false, // 是否签名
				loading:false, // 提交状态
				
				item14: {
					name: '1. 您正在服用处方药，保健品，或非处方药吗？',
					value: '',
					value1: ''
				},
				item15: {
					name: '2. 您现在，或曾经发生过以下情况吗？（多选）',
					radio_group: [
						{
							value: '心脏的问题，胸闷，中风',
							checked: false
						},
						{
							value: '血压过高',
							checked: false
						},
						{
							value: '医生给你避免体育运动的建议',
							checked: false
						},
						{
							value: '最近动过手术（过去的12个月中）',
							checked: false
						},
						{
							value: '怀孕（近期或3个月内）',
							checked: false
						},
						{
							value: '有过呼吸系统或肺部的问题',
							checked: false
						},
						{
							value: '肌肉，四肢关节，背部问题或仍然受旧伤的影响',
							checked: false
						},
						{
							value: '糖尿病或新陈代谢综合症',
							checked: false
						},
						{
							value: '血液中胆固醇含量过高',
							checked: false
						},
						{
							value: '家族遗传病史',
							checked: false
						},
						{
							value: '疝气或其他可能由于举重或健身运动恶化的症状',
							checked: false
						},
					],
					show1: false,
				},
				
				openid:'',
				describe: {},
				assessment:{},
				membersId: '',
				gymId: '', // 健身房id , 后期可能会用
			};
		},
		onLoad:function(e){
			if ( e.membersId ) {
				this.membersId = e.membersId
			}
			uni.showLoading()
			uni.getStorage({
				key: 'describe',
				success: (res) => {
					this.describe = res.data
				}
			});
			uni.getStorage({
				key: 'gymId',
				success: (res) => {
					this.gymId = res.data
				}
			});
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.reLaunch({
						url: 'pagesA/login/login'
					})
				}
			});
			 _that = this
			//获得Canvas的上下文
			content = wx.createCanvasContext('firstCanvas')
			//设置线的颜色
			content.setStrokeStyle("#000")
			//设置线的宽度
			content.setLineWidth(5)
			//设置线两端端点样式更加圆润
			content.setLineCap('round')
			//设置两条线连接处更加圆润
			content.setLineJoin('round')
		},
		methods:{
			RadioChange14(e) {
				this.item14.value = e.detail.value
			},
			RadioChange15(e) {
				var items = this.item15.radio_group,
						values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
						const item = items[i]
						if(values.includes(item.value)){
								this.$set(item,'checked',true)
						}else{
								this.$set(item,'checked',false)
						}
				}
			},
			submit () {
				var _that = this
				this.loading = true
				this.overSign()
				setTimeout(()=>{
					// if (_that.item1.value == '' || _that.item2.value == '' || _that.item3.value == '' || _that.item4.value == '' || _that.item5.value == '' || _that.item6.value == '' || _that.item7.value == '') {
					// 	uni.showToast({
					// 		title: '您有未完善的选项',
					// 		icon: 'none'
					// 	})
					// 	this.loading=false
					// 	return
					// }
					if (_that.signImage == '') {
						uni.showToast({
							title: '请完成签名',
							icon: 'none'
						})
						this.loading=false
						return
					} 
					// 执行完上面的为空验证之后提交事件
					var assessment = []
					assessment[0] = _that.item14
					assessment[1] = _that.item15
					assessment[2] = _that.signImage
					console.log(assessment)
					assessment = JSON.stringify(assessment) 
					_that.describe = JSON.stringify(_that.describe) 
					var data = {
						gymId: this.gymId,
						coachId: _that.openid,
						membersId: _that.membersId,
						describe: _that.describe,
						assessment: assessment
					}
					// console.log(data)
					uni.request({
						url: 'https://jxjsservice.jxfit.cn/coach/members/addQuestionnaireSurvey',
						method: 'POST',
						data: data,
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						success: res => {
							this.loading = false
							uni.reLaunch({
								url: '/pagesA/Questionnaire_list/Questionnaire_list?id=' + this.membersId + '&tohome=1'
							})
						},
						fail: () => {},
						complete: () => {}
					});
				},600)
			},
			setAjax(){
				uni.hideLoading()
			},
			sign_hide() {
				this.sign = false
			},
			sign_show() {
				this.sign = true
			},
			overSign: function() {
				if (this.isEnd) {
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',
						success: function(res) {
							//打印图片路径
							console.log(res.tempFilePath)
							
							uni.uploadFile({
								url: 'https://jxjsservice.jxfit.cn:443/coach/baseService/uploadFile',
								//仅为示例，非真实的接口地址
								filePath: res.tempFilePath,
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									//设置图片
									_that.signImage = 'https://jxjsservice.jxfit.cn/file' + JSON.parse(res.data).datas.face
									console.log(_that.signImage)
								}
							});
							
							//设置图片
							_that.signImage = res.tempFilePath
						}
					})
				} else {
						uni.showToast({
								title: '请先完成签名',
								icon: "none",
								duration: 1500,
								mask: true
						})
					}

			},

			// 画布的触摸移动开始手势响应
			start: function(event) {
					this.sign_hide()
					// console.log(event)
					// console.log("触摸开始" + event.changedTouches[0].x)
					// console.log("触摸开始" + event.changedTouches[0].y)
					//获取触摸开始的 x,y
					let point = {
							x: event.changedTouches[0].x,
							y: event.changedTouches[0].y
					}
					// console.log(point)
					touchs.push(point);

			},
			// 画布的触摸移动手势响应
			move: function(e) {
					let point = {
							x: e.touches[0].x,
							y: e.touches[0].y
					}
					// console.log(point)
					touchs.push(point)
					if (touchs.length >= 2) {
							this.draw(touchs)
					}
			},

			// 画布的触摸移动结束手势响应
			end: function(e) {
					console.log("触摸结束" + e)
					// 设置为已经签名
					this.isEnd = true
					// 清空轨迹数组
					for (let i = 0; i < touchs.length; i++) {
							touchs.pop()
					}

			},

			// 画布的触摸取消响应
			cancel: function(e) {
					console.log("触摸取消" + e)
			},

			// 画布的长按手势响应
			tap: function(e) {
					console.log("长按手势" + e)
			},

			error: function(e) {
					console.log("画布触摸错误" + e)
			},

			//绘制
			draw: function(touchs) {
					console.log(touchs[0],touchs[1])
					let point1 = touchs[0]
					let point2 = touchs[1]
					touchs.shift()
					content.moveTo(point1.x, point1.y)
					content.lineTo(point2.x, point2.y)
					content.stroke()
					content.draw(true)
			},
			//清除操作
			clearClick: function() {
					// 设置为未签名
					this.isEnd = false
					//清除画布
					content.clearRect(0, 0, canvasw, canvash)
					content.draw(true)
					// 显示客户签字字样
					this.sign_show()
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style>
	.bold {
		font-weight: 555;
		font-size: 24upx;
	}
	.block {
		border-bottom: 1upx solid #ccc;
	}
	.cu-form-group+.cu-form-group {
    border-top: none;
	}
	.radio {
		transform:scale(0.8);
	}
	.zt{
		font-size: 40upx;
		margin-left: 20upx;
	}
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.hui{
		margin: 30upx;
	}
	.wenti{
		background: #ffffff;
		padding: 30upx;
	}
	
	.bai{
		background: #ffffff;
	}
	.jgsm{
		width: 90%;
		margin: auto;
		background: #fcfcfc;
		padding: 20upx;
	}
	.jg{
		font-size: 28upx;
		font-weight: 555;
		padding: 10upx 0 10upx 0;
		color: #0000ff;
	}
	.rg{
		padding: 10upx 0 10upx 0;
	}
	.par-q{
		color: #7f7f7f;
	}
	.qq{
		background: #ffffff;
		color: #5e5e5e;
		padding: 40upx;
		box-sizing: content-box;
	}
	/* 画布相关 */
	.ts {
			color: #FF485D;
			font-size: 30upx;
			height: 100upx;
			line-height: 100upx;
			padding-left: 20upx;
	}

	canvas {
			 /* 画布的背景层级会覆盖要显示的字样所以这里不加背景 */
			/* background-color: #DDDDDD; */
			width: 700upx;
			margin: 0 25upx;
			height: 400upx;
			z-index: 9;
	}
</style>
